<template>
    <div class="rt">
        <div class="rt-l">
            <div class="rtpie">
                <v-chart :option="option" />
            </div>
        </div>
        <div class="rt-r">
            <div class="rtr-w">
                <div class="rtrrow rtrrow1" v-for="(dataitem, $itemindex) in dataitems" :key="'dataitem-' + (Math.floor(Math.random() * 100))">
                    <div class="rowwi">
                        <div>
                            <img class="icon" src="@/assets/forms_1.png" :style="{ width: '25px',height:'25px' }" v-if="dataitem.name == '智联'" />
                            <img class="icon" src="@/assets/forms_2.png" :style="{ width: '24px',height:'29px' }" v-if="dataitem.name == '被动'" />
                            <img class="icon" src="@/assets/forms_3.png" :style="{ width: '29px',height:'29px',marginLeft:'-2px' }" v-if="dataitem.name == '主动'" />
                        </div>
                        <div class="title">{{ dataitem.name }}</div>
                        <div v-if="dataitem.pending===true">
                            <div class="value" :style="{ color: 'grey',fontSize:'18px',marginTop:'-4px' }">对接中</div>

                        </div>
                        <div v-else>
                            <div class="value" :style="{ color: color[dataitem.name] }">{{ dataitem.value }}</div>
                            <div class="unit" :style="{ color: color[dataitem.name] }">{{ dataitem.unit || '条' }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { reactive } from 'vue'
import '../font/bebas/bebas.css'

declare interface dataitem {
    name: String
    value: Number
    unit: String
}

export default {
    props: {
        // dataitems: Array<dataitem>
        dataitems: Array,
    },
    setup(props) {
        let dataitems = props.dataitems || []
        let iconmap = {
            development: [
                'src/assets/forms_1.png',
                'src/assets/forms_3.png',
                'src/assets/forms_2.png',
            ],
            production: [
                'assets/forms_1.png',
                'assets/forms_3.png',
                'assets/forms_2.png',
            ],
        }
        let env = process.env.NODE_ENV || 'development'
        let icon: any = iconmap[env]
        let color = {
            智联: '#3376D1',
            主动: '#35AAE2',
            被动: '#81E3ED',
        }

        let arrName: any = []
        let arrValue: any = []
        let sum = 0
        let pieSeries: any = [],
            lineYAxis: any = []

        let colorArr = []

        // 数据处理
        dataitems.forEach((v, i) => {
            arrName.push(v.name)
            arrValue.push(v.value)
            sum = sum + v.value
            colorArr.push(color[v.name])
        })

        // 图表option整理
        dataitems.forEach((v: any, i: any) => {
            let currentp = v.value / sum
            if (currentp > 0.75) currentp = 0.75

            pieSeries.push({
                name: '学历',
                type: 'pie',
                clockwise: false,
                cursor: 'default',
                hoverAnimation: false,
                // radius: [i * 25 + '%', 10 + i * 25 + '%'],
                radius: [90 - i * 20 + '%', 100 - i * 20 + '%'],

                center: ['50%', '50%'],
                label: {
                    show: false,
                },
                data: [
                    {
                        value: currentp,
                        name: v.name,
                    },
                    {
                        value: 1 - currentp,
                        name: '',
                        itemStyle: {
                            color: 'rgba(0,0,0,0)',
                        },
                    },
                ],
            })
            let seriesitem = {
                name: '',
                type: 'pie',
                silent: true,
                z: 1,
                clockWise: false, //顺时加载
                cursor: 'default',
                hoverAnimation: false, //鼠标移入变大
                // radius: [100 - i * 15 + '%', 85 - i * 15 + '%'],1
                // radius: [85 - i * 20 + '%', 100 - i * 15 + '%'],
                radius: [90 - i * 20 + '%', 100 - i * 20 + '%'],

                // radius: [i * 25 + '%', 10 + i * 25 + '%'],
                center: ['50%', '50%'],
                label: {
                    show: false,
                },
                data: [
                    {
                        value: 7.5,
                        itemStyle: {
                            color: '#23284e',
                        },
                    },
                    {
                        value: 2.5,
                        name: '',
                        itemStyle: {
                            color: 'transparent',
                        },
                    },
                ],
            }
            pieSeries.push(seriesitem)
            v.percent = ((v.value / sum) * 100).toFixed(1) + '%'
            if (v.percent == 'NaN%') {
                v.percent = '0%'
            }

            let lineyaxisitem = {
                value: i,
                textStyle: {
                    rich: {
                        circle: {
                            color: color[v.name],
                            padding: [0, 5],
                        },
                    },
                },
            }

            lineYAxis.push(lineyaxisitem)
        })

        let option = {
            color: colorArr,
            grid: {
                top: '0%',
                bottom: '70%',
                left: '50%',
                right: 0,
                containLabel: false,
            },
            yAxis: [
                {
                    type: 'category',
                    inverse: true,
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        formatter: function (params) {
                            let item: any = dataitems[params]
                            return '{percent|' + item.percent + '}'
                        },
                        interval: 0,
                        inside: true,
                        textStyle: {
                            color: 'white',
                            fontSize: 14,
                            rich: {
                                line: {
                                    width: 170,
                                    height: 10,
                                    // backgroundColor: {image: dashedPic}
                                },
                                name: {
                                    color: '#666',
                                    fontSize: 14,
                                },
                                bd: {
                                    color: '#ccc',
                                    padding: [0, 5],
                                    fontSize: 14,
                                },
                                percent: {
                                    color: '#fff',
                                    fontSize: 14,
                                },
                                value: {
                                    color: '#333',
                                    fontSize: 16,
                                    fontWeight: 500,
                                    padding: [0, 0, 0, 20],
                                },
                                unit: {
                                    fontSize: 14,
                                },
                            },
                        },
                        show: true,
                    },
                    data: lineYAxis,
                },
            ],
            xAxis: [
                {
                    show: false,
                },
            ],
            series: pieSeries,
        }
        return {
            option: reactive(option),
            dataitems: reactive(dataitems),
            color: reactive(color),
            icon: reactive(icon),
        }
    },
}
</script>
<style lang="less" scoped>
.rt {
    height: 100%;
    display: flex;
}

.rt-l {
    width: 180px;
    height: 100%;
    margin-left: 15px;
    /*border: 1px solid red;*/

    .rtpie {
        width: 166px;
        height: 166px;
        /*border: 1px solid red;*/
        margin-left: 10px;
    }
}

.rt-r {
    /*border: 1px solid green;*/
    height: 100%;
    flex: 1;

    .rtr-w {
        height: 100%;
        padding-left: 34px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .rtrrow {
            // border: 1px solid green;
            flex: 1;
            position: relative;

            .rowwi {
                display: flex;
                align-items: center;
                height: 22px;
                line-height: 22px;
                position: absolute;
                top: 50%;
                left: 0;
                transform: translate(0, -50%);

                .icon {
                    width: 18px;
                    height: 18px;
                    line-height: 22px;
                    /*border: 1px solid red;*/
                    float: left;
                }

                .title {
                    font-size: 18px;
                    line-height: 22px;
                    vertical-align: bottom;
                    margin-left: 10px;
                    font-family: Microsoft YaHei Semibold,
                        Microsoft YaHei Semibold-Semibold;
                    font-weight: 600;
                    text-align: left;
                    color: #ffffff;
                    float: left;
                }

                .value {
                    font-size: 28px;
                    line-height: 28px;
                    vertical-align: bottom;
                    font-family: 'bebas';
                    font-weight: 700;
                    text-align: left;
                    color: #fdba55;
                    float: left;
                    margin-left: 28px;
                }

                .unit {
                    font-size: 14px;
                    line-height: 22px;
                    vertical-align: bottom;
                    font-family: DIN Condensed Bold, DIN Condensed Bold-Bold;
                    font-weight: 700;
                    text-align: left;
                    float: left;
                    margin-left: 4px;
                    margin-top: 5px;
                }
            }

            .rtrrow:first-child .unit {
                color: green;
                margin-left: 22px;
            }
        }
    }
}
</style>